import React, { useState, useEffect, useRef } from 'react'; // 导入React核心库和hooks
import { Table, Card, Statistic, Row, Col, Spin, Alert, Button, Space, Tag, Tooltip, message } from 'antd'; // 导入Ant Design组件
import { ReloadOutlined, DollarOutlined, ShoppingOutlined, CheckCircleOutlined, ClockCircleOutlined } from '@ant-design/icons'; // 导入图标

// 今日GMV数据表格组件
const TodayGMVTable = () => {
  // 状态管理
  const [loading, setLoading] = useState(true); // 加载状态
  const [error, setError] = useState(null); // 错误状态
  const [gmvData, setGmvData] = useState([]); // GMV数据
  const [summaryData, setSummaryData] = useState({}); // 汇总数据
  const [lastUpdateTime, setLastUpdateTime] = useState(null); // 最后更新时间
  const intervalRef = useRef(null); // 定时器引用

  // 表格列配置
  const columns = [
    {
      title: '订单编号', // 列标题
      dataIndex: 'orderNo', // 数据字段
      key: 'orderNo', // 唯一键
      width: 150, // 列宽度
      render: (text) => <span style={{ fontFamily: 'monospace' }}>{text}</span> // 自定义渲染
    },
    {
      title: '客户姓名', // 列标题
      dataIndex: 'customerName', // 数据字段
      key: 'customerName', // 唯一键
      width: 120, // 列宽度
    },
    {
      title: '订单金额', // 列标题
      dataIndex: 'amount', // 数据字段
      key: 'amount', // 唯一键
      width: 120, // 列宽度
      render: (amount) => (
        <span style={{ color: '#52c41a', fontWeight: 'bold' }}>
          ¥{amount.toLocaleString()} {/* 格式化金额显示 */}
        </span>
      )
    },
    {
      title: '订单状态', // 列标题
      dataIndex: 'status', // 数据字段
      key: 'status', // 唯一键
      width: 100, // 列宽度
      render: (status) => {
        // 根据状态返回不同颜色的标签
        const statusConfig = {
          '待付款': { color: 'orange', text: '待付款' },
          '已付款': { color: 'blue', text: '已付款' },
          '待发货': { color: 'purple', text: '待发货' },
          '已发货': { color: 'cyan', text: '已发货' },
          '已完成': { color: 'green', text: '已完成' },
          '已取消': { color: 'red', text: '已取消' }
        };
        const config = statusConfig[status] || { color: 'default', text: status };
        return <Tag color={config.color}>{config.text}</Tag>;
      }
    },
    {
      title: '支付方式', // 列标题
      dataIndex: 'paymentMethod', // 数据字段
      key: 'paymentMethod', // 唯一键
      width: 100, // 列宽度
      render: (method) => {
        // 支付方式图标和文字
        const methodConfig = {
          '支付宝': { icon: '💳', color: '#1677ff' },
          '微信支付': { icon: '💚', color: '#52c41a' },
          '银行卡': { icon: '🏦', color: '#722ed1' },
          '现金': { icon: '💰', color: '#faad14' }
        };
        const config = methodConfig[method] || { icon: '💳', color: '#666' };
        return (
          <span style={{ color: config.color }}>
            {config.icon} {method}
          </span>
        );
      }
    },
    {
      title: '下单时间', // 列标题
      dataIndex: 'orderTime', // 数据字段
      key: 'orderTime', // 唯一键
      width: 180, // 列宽度
      render: (time) => {
        const date = new Date(time); // 创建日期对象
        return (
          <Tooltip title={date.toLocaleString()}> {/* 鼠标悬停显示完整时间 */}
            <span>{date.toLocaleTimeString()}</span> {/* 只显示时间部分 */}
          </Tooltip>
        );
      }
    },
    {
      title: '商品信息', // 列标题
      dataIndex: 'products', // 数据字段
      key: 'products', // 唯一键
      width: 200, // 列宽度
      render: (products) => (
        <div>
          {products.map((product, index) => ( // 遍历商品列表
            <div key={index} style={{ marginBottom: '4px' }}>
              <span>{product.name}</span>
              <span style={{ color: '#999', marginLeft: '8px' }}>
                x{product.quantity} {/* 显示商品数量 */}
              </span>
            </div>
          ))}
        </div>
      )
    },
    {
      title: '操作', // 列标题
      key: 'action', // 唯一键
      width: 120, // 列宽度
      render: (_, record) => ( // 渲染操作按钮
        <Space size="small">
          <Button type="link" size="small" onClick={() => handleViewDetail(record)}>
            查看详情
          </Button>
        </Space>
      )
    }
  ];

  // 模拟后端API调用函数
  const fetchGMVData = async () => {
    try {
      setLoading(true); // 设置加载状态
      setError(null); // 清除错误状态
      // 真实API请求
      const res = await fetch('http://localhost:3001/api/gmv/today'); // 请求后端API
      if (!res.ok) throw new Error('网络错误'); // 检查响应
      const data = await res.json(); // 解析JSON
      setGmvData(data.orders); // 设置订单数据
      setSummaryData(data.summary); // 设置汇总数据
      setLastUpdateTime(new Date()); // 更新时间
    } catch (err) {
      setError('获取数据失败，请稍后重试'); // 设置错误信息
    } finally {
      setLoading(false); // 结束加载状态
    }
  };

  // 生成模拟GMV数据
  const generateMockGMVData = () => {
    const customers = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十', '钱十一', '孙十二'];
    const products = [
      { name: 'iPhone 15 Pro', price: 8999 },
      { name: '小米电视 65寸', price: 2999 },
      { name: '华为Mate60 Pro', price: 6999 },
      { name: '联想ThinkPad X1', price: 12999 },
      { name: '美的空调 1.5匹', price: 2499 },
      { name: '戴尔显示器 27寸', price: 1899 },
      { name: '苹果MacBook Air', price: 7999 },
      { name: '索尼PS5', price: 3899 }
    ];
    const paymentMethods = ['支付宝', '微信支付', '银行卡', '现金'];
    const statuses = ['待付款', '已付款', '待发货', '已发货', '已完成', '已取消'];
    
    // 生成今日订单数据
    const today = new Date(); // 获取今天日期
    const orders = [];
    let totalAmount = 0; // 总金额
    let totalOrders = 0; // 总订单数
    let completedOrders = 0; // 已完成订单数
    
    // 生成20-50条随机订单
    const orderCount = Math.floor(Math.random() * 31) + 20; // 20-50条订单
    
    for (let i = 0; i < orderCount; i++) {
      const orderTime = new Date(today.getTime() + Math.random() * 24 * 60 * 60 * 1000); // 今天随机时间
      const productCount = Math.floor(Math.random() * 3) + 1; // 1-3个商品
      const orderProducts = [];
      let orderAmount = 0; // 订单金额
      
      // 生成订单商品
      for (let j = 0; j < productCount; j++) {
        const product = products[Math.floor(Math.random() * products.length)]; // 随机选择商品
        const quantity = Math.floor(Math.random() * 3) + 1; // 1-3个数量
        orderProducts.push({
          name: product.name,
          price: product.price,
          quantity: quantity
        });
        orderAmount += product.price * quantity; // 计算订单金额
      }
      
      const status = statuses[Math.floor(Math.random() * statuses.length)]; // 随机状态
      if (status === '已完成') {
        completedOrders++; // 统计已完成订单
      }
      
      orders.push({
        id: i + 1, // 订单ID
        orderNo: `GMV${today.getFullYear()}${String(today.getMonth() + 1).padStart(2, '0')}${String(today.getDate()).padStart(2, '0')}${String(i + 1).padStart(4, '0')}`, // 订单编号
        customerName: customers[Math.floor(Math.random() * customers.length)], // 客户姓名
        amount: orderAmount, // 订单金额
        status: status, // 订单状态
        paymentMethod: paymentMethods[Math.floor(Math.random() * paymentMethods.length)], // 支付方式
        orderTime: orderTime.toISOString(), // 下单时间
        products: orderProducts // 商品信息
      });
      
      totalAmount += orderAmount; // 累计总金额
      totalOrders++; // 累计总订单数
    }
    
    // 按时间倒序排列
    orders.sort((a, b) => new Date(b.orderTime) - new Date(a.orderTime));
    
    return {
      orders: orders, // 订单列表
      summary: {
        totalAmount: totalAmount, // 总金额
        totalOrders: totalOrders, // 总订单数
        completedOrders: completedOrders, // 已完成订单数
        averageAmount: totalOrders > 0 ? Math.round(totalAmount / totalOrders) : 0 // 平均订单金额
      }
    };
  };

  // 查看订单详情
  const handleViewDetail = (record) => {
    console.log('查看订单详情:', record); // 打印订单详情
    // 这里可以打开详情模态框或跳转到详情页面
    alert(`订单详情：${record.orderNo}\n客户：${record.customerName}\n金额：¥${record.amount.toLocaleString()}`);
  };

  // 手动刷新数据
  const handleRefresh = () => {
    fetchGMVData(); // 重新获取数据
  };

  // 初始化数据
  const handleInitData = async () => {
    try {
      setLoading(true); // 设置加载状态
      const res = await fetch('http://localhost:3001/api/init-data', {
        method: 'POST', // POST请求
        headers: {
          'Content-Type': 'application/json', // 设置请求头
        }
      }); // 调用初始化API
      
      if (!res.ok) throw new Error('初始化失败'); // 检查响应
      const data = await res.json(); // 解析响应
      
      if (data.success) {
        message.success(`数据初始化成功！生成了 ${data.orderCount} 条订单`); // 成功提示
        fetchGMVData(); // 重新获取数据
      } else {
        throw new Error(data.error || '初始化失败'); // 抛出错误
      }
    } catch (err) {
      message.error('数据初始化失败：' + err.message); // 错误提示
    } finally {
      setLoading(false); // 结束加载状态
    }
  };

  // 组件挂载时获取数据
  useEffect(() => {
    fetchGMVData(); // 初始获取数据
    
    // 设置定时器，每30秒自动刷新一次
    intervalRef.current = setInterval(() => {
      fetchGMVData(); // 定时刷新数据
    }, 30000); // 30秒间隔
    
    // 组件卸载时清理定时器
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current); // 清除定时器
      }
    };
  }, []); // 空依赖数组，只在组件挂载时执行

  return (
    <div style={{ padding: '24px' }}> {/* 外层容器 */}
      {/* 页面标题 */}
      <div style={{ marginBottom: '24px' }}>
        <h2 style={{ margin: 0, color: '#1890ff' }}>
          <DollarOutlined style={{ marginRight: '8px' }} />
          今日GMV数据
        </h2>
        <p style={{ margin: '8px 0 0 0', color: '#666' }}>
          实时监控今日订单总价值，数据每30秒自动更新
        </p>
      </div>

      {/* 数据汇总卡片 */}
      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="今日总GMV"
              value={summaryData.totalAmount || 0}
              precision={0}
              valueStyle={{ color: '#3f8600' }}
              prefix="¥"
              suffix="元"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="订单总数"
              value={summaryData.totalOrders || 0}
              valueStyle={{ color: '#1890ff' }}
              prefix={<ShoppingOutlined />}
              suffix="单"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="已完成订单"
              value={summaryData.completedOrders || 0}
              valueStyle={{ color: '#52c41a' }}
              prefix={<CheckCircleOutlined />}
              suffix="单"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="平均订单金额"
              value={summaryData.averageAmount || 0}
              precision={0}
              valueStyle={{ color: '#722ed1' }}
              prefix="¥"
              suffix="元"
            />
          </Card>
        </Col>
      </Row>

      {/* 操作栏 */}
      <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Space>
            <Button 
              type="primary" 
              icon={<ReloadOutlined />} 
              onClick={handleRefresh}
              loading={loading}
            >
              刷新数据
            </Button>
            <Button 
              type="default" 
              onClick={handleInitData}
              loading={loading}
            >
              初始化数据
            </Button>
            {lastUpdateTime && (
              <span style={{ color: '#666', fontSize: '12px' }}>
                <ClockCircleOutlined style={{ marginRight: '4px' }} />
                最后更新：{lastUpdateTime.toLocaleTimeString()}
              </span>
            )}
          </Space>
        </div>
        <div>
          <Tag color="blue">实时更新中</Tag>
        </div>
      </div>

      {/* 错误提示 */}
      {error && (
        <Alert
          message="数据获取失败"
          description={error}
          type="error"
          showIcon
          style={{ marginBottom: '16px' }}
          action={
            <Button size="small" danger onClick={handleRefresh}>
              重试
            </Button>
          }
        />
      )}

      {/* 数据表格 */}
      <Card>
        <Table
          columns={columns} // 表格列配置
          dataSource={gmvData} // 数据源
          rowKey="id" // 行键
          loading={loading} // 加载状态
          pagination={{
            pageSize: 10, // 每页显示10条
            showSizeChanger: true, // 显示页码选择器
            showQuickJumper: true, // 显示快速跳转
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条` // 显示总数
          }}
          scroll={{ x: 1200 }} // 横向滚动
          size="middle" // 表格大小
        />
      </Card>
    </div>
  );
};

export default TodayGMVTable; // 导出组件 